S<!-- 搜索栏 -->
<template>
  <div class="flat-container">
    <el-input
      placeholder="搜索你想要的资源..."
      prefix-icon="el-icon-search"
      class="search-input"
      v-model="searchText"
      @keydown.enter.native="handleSearch"
    >
    </el-input>
  </div>
</template>

<script>
export default {
  name: "SearchBar",
  components: {},
  data() {
    return {
      searchText: "",
      search_props: "",
    };
  },
  props: {
    current_category_id: {
      type: Number,
    },
  },
  watch: {
    current_category_id(val) {
      this.search_category_id = val;
    },
  },
  methods: {
    async handleSearch() {
      console.log('我search');
      this.search_props = this.searchText;
      console.log('search_props',this.search_props);
      this.$emit('search_props',this.search_props)
    },
  },
};
</script>

<!-- scoped 样式隔离，防止污染全局样式 -->
<style lang="scss" scoped>
.flat-container {
  margin-bottom: 20px;
}
.search-input {
  //穿透 scoped，选中子组件内部的元素  当你在 scoped 组件里，想修改第三方组件（Element、Antd、UI库）内部子元素的样式时，就需要用 :deep() 来突破作用域隔离。
  :deep(.el-input__inner) {
    border-radius: 8px;
    padding: 16px 16px 16px 48px;
    height: 58px; /* 同时设置高度 */
    font-size: 18px;
  }
  :deep(.el-input__prefix) {
    font-size: 18px;
    margin-left: 10px;
    color: #6a7280;
    margin-top: 1.5px;
  }
}
</style>
